<template>
  <uNavbar
    back-text=""
    title=""
    :background="{ backgroundColor: 'transparent' }"
    immersive
    back-icon-size="30rpx"
    back-icon-color="#000"></uNavbar>

  <view z-1>
    <nut-swiper z-1 height="540rpx" :pagination-visible="current == 0" auto-play="0" @change="changeSwiper">
      <nut-swiper-item v-for="item in goodsInfo.goodsImgList" :key="item.id" z-1>
        <view w-full relative flex justify-center items-center>
          <video
            v-if="item.type == 1"
            id="goodsRef"
            w-full
            h-540rpx
            z-2
            :controls="isFullScreen"
            :autoplay="false"
            :show-center-play-btn="false"
            loop
            :enable-progress-gesture="false"
            :src="item.url"
            object-fit="contain"
            @fullscreenchange="changeFullScreen"></video>
          <image v-if="!isFullScreen" src="/static/play.png" w-50rpx h-50rpx absolute z-3 @click="playVideo"></image>
        </view>
        <image v-if="item.type == 2" mode="aspectFill" w-full h-540rpx z-2 :src="item.url" alt="" />
      </nut-swiper-item>
      <template v-if="current != 0" v-slot:page>
        <div
          absolute
          right-40rpx
          bottom-80rpx
          flex
          justify-center
          items-center
          box-border
          px-16rpx
          text-white
          text-26rpx
          h-48rpx
          rounded-24rpx
          style="background: rgba(0, 0, 0, 0.33)">
          {{ current }}/{{ swiperLength }}
        </div>
      </template>
    </nut-swiper>
  </view>

  <view z-10 bg="#fff" w-full box-border pa-40rpx rounded-tl-40rpx rounded-tr-40rpx absolute top-500rpx pb-30>
    <view flex items-end mt-20rpx font-bold text="#D03939">
      <view mb-6rpx text-28rpx mr-4rpx>¥</view>
      <view text-48rpx>{{ goodsInfo.goodsPrice }}</view>
    </view>
    <view break-all text-42rpx font-bold mt-40rpx>{{ goodsInfo.goodsName }}</view>
    <view mt-22rpx flex>
      <view
        h-40rpx
        px-20rpx
        box-border
        rounded-20rpx
        bg="#FCC300"
        text="#000"
        text-20rpx
        flex
        justify-center
        items-center
        mr-20rpx>
        {{ goodsInfo.goodsType == 1 ? '电子票' : '智能卡' }}
      </view>
      <view
        v-if="goodsInfo.labelName1"
        h-40rpx
        px-10rpx
        box-border
        rounded-20rpx
        bg="#EEEEEE"
        text="#484848"
        text-20rpx
        flex
        justify-center
        items-center
        mr-20rpx>
        {{ goodsInfo.labelName1 }}
      </view>
      <view
        v-if="goodsInfo.labelName2"
        h-40rpx
        px-10rpx
        box-border
        rounded-20rpx
        bg="#EEEEEE"
        text="#484848"
        text-20rpx
        flex
        justify-center
        items-center
        mr-20rpx>
        {{ goodsInfo.labelName2 }}
      </view>
      <view
        v-if="goodsInfo.labelName3"
        h-40rpx
        px-10rpx
        box-border
        rounded-20rpx
        bg="#EEEEEE"
        text="#484848"
        text-20rpx
        flex
        justify-center
        items-center
        mr-20rpx>
        {{ goodsInfo.labelName3 }}
      </view>
    </view>
    <view break-all text-28rpx line-height-40rpx mt-42rpx>{{ goodsInfo.sellPoint }}</view>
    <view mt-60rpx flex items-center>
      <view w-10rpx h-36rpx bg="#FCC300" rounded-10rpx mr-10rpx></view>
      <view text-32rpx font-bold text="#000">商品介绍</view>
    </view>
    <view mt-20rpx w-full v-html="goodsContent"></view>
    <!-- <rich-text mt-20rpx :nodes="goodsContent" lazy-load></rich-text> -->
  </view>
  <view
    class="safe-bottom"
    position-fixed
    rounded-t-20rpx
    bottom-0
    w-full
    bg="#fff"
    z-999
    style="box-shadow: 4rpx 0rpx 20rpx 0rpx rgba(190, 190, 190, 0.25)">
    <view w-full box-border px-40rpx py-32rpx flex justify-between items-center>
      <view flex items-end mt-20rpx font-bold text="#D03939">
        <view mb-6rpx text-28rpx mr-4rpx>¥</view>
        <view text-48rpx>{{ goodsInfo.goodsPrice }}</view>
        <!-- {{ unitPrice(goodsInfo.goodsPrice) }} -->
      </view>
      <view
        w-340rpx
        h-80rpx
        rounded-40rpx
        bg="#FCC300"
        flex
        justify-center
        items-center
        font-500
        text="#000"
        text-32rpx
        @click="createOrder">
        立即购票
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getTicketGoodsDetail } from '@/api/ticketGoods'
import { onLoad } from '@dcloudio/uni-app'
import { unitPrice, needLogin } from '@/utils/filters'
import uNavbar from '@/components/navbar/index.vue'
const videoContext = ref<any>(null)
const goodsInfo = ref<any>({})
const isFullScreen = ref<boolean>(false)
const current = ref<number>(0)
const swiperLength = ref<number>(0)

const goodsContent = computed(() => {
  return goodsInfo.value.goodsContent
    .replace(/<img[^>]*style="[^"]*"[^>]*>/gi, (match: any) => {
      return match.replace(/style="[^"]*"/gi, '') // 移除内联样式
    })
    .replace(/<img /g, '<img style="width:100%;height:auto;display:block;object-fit:widthFix;" ')
    .replace(/<video /g, '<video style="width:100%;height:auto;display:block;" ')
})

// 创建订单
async function createOrder() {
  needLogin(() => {
    uni.navigateTo({
      url: '/pages/ticket/order?id=' + goodsInfo.value.goodsId
    })
  })
}
function changeSwiper(index: number) {
  current.value = index
}
function playVideo() {
  if (!videoContext.value) {
    videoContext.value = uni.createVideoContext('goodsRef')
  }
  videoContext.value.requestFullScreen()
  videoContext.value.play()
}
function changeFullScreen(e: any) {
  isFullScreen.value = e.detail.fullScreen
  if (!isFullScreen.value) {
    videoContext.value.stop()
  }
}
onMounted(() => {})
onLoad((options: any) => {
  getTicketGoodsDetail(options.id).then((res: any) => {
    goodsInfo.value = res.data.result
    swiperLength.value = goodsInfo.value.goodsImgList.length
    if (goodsInfo.value.goodsImgList[0].type == 1) {
      swiperLength.value--
    }
  })
})
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style scoped></style>
